<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            position: relative;
        }

        .wrap video {
            width: 100%;
        }

        .wrap .big_box {
            width: 450px;
            height: 60px;
            margin: auto;
            position: absolute;
            top: 50px;
            left: 35%;
        }

        .wrap .big_box .one {
            display: inline-block;
            width: 100px;
            margin: 0 50px 0 80px;
            text-align: center;
        }

        .wrap .big_box .one h3 {
            width: 100px;
        }

        .wrap .big_box .one :hover {
            border-bottom: 5px solid grey;
        }

        .wrap .big_box .two {
            left: 200px;
            display: inline-block;
            width: 100px;
            margin: 0 50px 0 50px;
            text-align: center;
        }

        .wrap .big_box .two h3 {
            width: 100px;
        }

        .wrap .two :hover {
            border-bottom: 5px solid grey;
        }

        .wrap .tab_two {
            position: absolute;
            top: 10%;
            left: 35%;
        }

        .wrap .Sign_in {
            width: 450px;
            height: 450px;
            margin: 50px auto;
            text-align: center;
            position: absolute;
            left: 60%;
            border: 2px solid grey;
        }

        .wrap .Sign_in h3 {
            width: 300px;
            margin: 20px auto;
        }

        .wrap .Sign_in label {
            display: inline-block;
            width: 70px;
            text-align: right;
        }

        .wrap .Sign_in input {
            margin: 10px;
        }

        .wrap .Sign_in button {
            width: 100px;
            height: 30px;
        }

        .wrap .Log_in {
            width: 450px;
            height: 450px;
            margin: 50px auto;
            text-align: center;
            position: absolute;
            left: 60%;
            border: 2px solid grey;
        }

        .wrap .Log_in label {
            display: inline-block;
            width: 70px;
            text-align: right;
        }

        .wrap .Log_in h3 {
            width: 300px;
            margin: 20px auto;
        }

        .wrap .Log_in input {
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <video autoplay muted loop>
            <source src="../山水画pro.mp4">
        </video>
        <div class="big_box">

            <div class="tab_one">
                <div class="one">
                    <h3>用户注册</h1>
                </div>
                <div class="two">
                    <h3>用户登陆</h1>
                </div>
            </div>
        </div>


        <div class="tab_two">
            <div class="Sign_in"> <!-- 注册的意思 -->
                <h1>欢迎注册</h1>
                <h3>您需要先注册才可以登录 •̀֊•́✧</h3>
                <form action="#">
                    <label>账号:</label><input type="text" placeholder="6-11位数字"><br>
                    <label>密码:</label><input type="password" placeholder="6~10个字符,含有大小写字母+数字。"><br>
                    <!-- <label>确认密码:</label><input type="password" placeholder="再检查一下!!"><br> -->
                    <button onclick="signin()">提交注册</button>
                </form>


            </div>

            <div class="Log_in"> <!-- 登录的意思 -->
                <h1>欢迎登录</h1>
                <h3>恭喜你已经注册完毕啦 •̀֊•́✧</h3>
                <form action="#">

                    <label for="">账号:</label><input type="text" placeholder="请输入您的手机号"><br>
                    <label for="">密码:</label><input type="password" placeholder="6~10个字符,含有大小写字母+数字。"><br>

                </form>
                <button onclick="login()">提交登录</button>
            </div>
        </div>


    </div>






    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="../登录注册.js"></script>
    <script>
        $('.Log_in').css('display', 'none')
        $('.one').click(() => {
            $('.Sign_in').css('display', 'inline-block')
            $('.Log_in').css('display', 'none')
        })

        $('.two').click(() => {
            $('.Sign_in').css('display', 'none')
            $('.Log_in').css('display', 'inline-block')
        })
    </script>
</body>

</html>